<template>
	<view v-if="chat_flag == 1">
		<tn-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="left">
				<view class="btn-left" @click="shaixuan">
					<u-icon name="shaixuan" custom-prefix="iconfont"></u-icon>
					<view class="left-text">筛选</view>
				</view>
			</block>
			<block slot="content">推荐</block>
		</tn-custom>
		<view class="tan-box">
			<tantan :list="list" @onChange="change" @onClickImage="clickImage" ref="tantan"></tantan>
			<view class="btn-box">
				<u-button :custom-style="customStyle" hover-class="none" :hair-line="false" open-type="share"></u-button>
				<view class="btn" @click="footerBtnClick('dislike')"></view>
				<view class="btn" @click="btnApply"></view> 
				<view class="btn2" @click="btnWechat"></view>
			</view>
		</view>
		<coin-popup></coin-popup>
		<user-auth></user-auth>
		<user-phone></user-phone>
		<user-pay></user-pay>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
	import tantan from "@/components/dgex-tantan/dgex-tantan.vue"
	import {mapState} from 'vuex'
	export default {
		components: {
			tantan
		},
		data() {
			return {
				current: 1,
				pageSize: 20,
				isEnd: false,
				list: [],
				user: {
					userId: 0,
				},
				customStyle: {
					width: '96rpx',
					height: '96rpx',
					margin: '0 16rpx',
					border: '0',
					borderRadius: '50rpx',
					display: 'flex',
					justifyContent: 'center',
					alignContent: 'center',
					position: 'relative',
					transition: '100ms',
					backgroundColor: 'unset',
				},
			}
		},
		mounted() {
			this.init();
		},
		onShow() {
			this.$u.get('/system/config/getChatValue',{
				appId: this.website.appId,
				userId: this.vuex_user.userId,
			}).then(res => {
				this.$store.commit('setChatFlag', res.data);
				this.vuex_tabbarList[0].show = res.data;
				this.vuex_tabbarList[2].show = res.data;
				this.$store.commit('setTabbar', this.vuex_tabbarList);
			});
		},
		onShareAppMessage(res) {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index/world/index?userId='+this.user.userId,
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		onShareTimeline() {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index/world/index?userId='+this.user.userId,
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		computed: {
			...mapState(['vuex_user','vuex_query','chat_flag','vuex_tabbarList']),
		},
		methods: {
			query() {
				this.current = 1;
				this.isEnd = false;
				this.loadquery();
			},
			loadquery() {
				this.$u.get('/system/user/getListByHot',{
					pageNum: this.current,
					min: this.vuex_query.min,
					max: this.vuex_query.max,
					pageSize: this.pageSize,
				}).then(res => {
					var totalPage = Math.ceil(res.total/this.pageSize);
					this.pages = totalPage;
					this.current ++;
					this.status = 'loadmore';
					if(this.current > this.pages){
						this.status = 'nomore';
						this.isEnd = true;
					}
					
					this.list = this.list.concat(res.rows);
				}).catch(err => {
					
				})
			},
			loadmore() {
				if(this.isEnd){
					return;
				}
				this.$u.get('/system/user/getListByHot',{
					pageNum: this.current,
					min: this.vuex_query.min,
					max: this.vuex_query.max,
					pageSize: this.pageSize,
				}).then(res => {
					var totalPage = Math.ceil(res.total/this.pageSize);
					this.pages = totalPage;
					this.current ++;
					if(this.current > this.pages){
						this.isEnd = true;
					}
					
					var rows = res.rows;
					for(var i=0;i<rows.length;i++){
						var row = rows[i];
						if(row.albums){
							row.image = row.albums.split(',')[0];
						}
						row.title = row.nickName + ' ' + row.age;
						row.desc = row.city + ' (' + row.distance + 'km' + ')';
						if(row.isPay == 1){
							row.tags = ['贵'+row.coinLevel];
						}
					}
					
					this.list = this.list.concat(rows);
				}).catch(err => {
					
				})
			},
			init() {
				this.$u.get('/system/user/getListByOpen',{
					pageNum: this.current,
					pageSize: this.pageSize,
					userId: this.vuex_user.userId,
					lon: this.vuex_user.lon,
					lat: this.vuex_user.lat,
				}).then(res => {
					var rows = res.rows;
					for(var i=0;i<rows.length;i++){
						var row = rows[i];
						if(row.albums){
							row.image = row.albums.split(',')[0];
						}
						row.title = row.nickName + ' ' + row.age;
						row.desc = row.city + ' (' + row.distance + 'km' + ')';
						if(row.isPay == 1){
							row.tags = ['贵'+row.coinLevel];
						}
					}
					this.list = rows;
				}).catch(err => {
					
				})
			},
			shaixuan() {
				this.$u.route({
					url: 'pages/index/user/menu',
				});
			},
			change(data) {
				console.log(data);
				this.user = data.lastItem;
				if(data.currentIndex > this.list.length - 5){
					this.loadmore();
				}
				this.addCard(data);
			},
			addCard(data) {
				var currentItem = data.currentItem;
				var cardUserId = currentItem.userId;
				var cardType = '0';
				if(data.type == 'dislike'){
					cardType = '1';
					this.$u.post('/wq/card/add',{
						cardUserId: cardUserId,
						cardType: cardType,
					}).then(res => {
						
					}).catch(err => {
						
					})
				}else{
					this.$u.post('/wq/card/add',{
						cardUserId: cardUserId,
						cardType: cardType,
					}).then(res => {
						this.$refs.tantan.applyUser(currentItem);
					}).catch(err => {
						
					})
				}
			},
			clickImage(data) {
				this.toCenter(data.currentItem);
			},
			toCenter(item) {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: item.userId,
						}
					});
				});
			},
			btnApply() {
				this.$refs.tantan.btnApply();
			},
			btnWechat() {
				this.$refs.tantan.btnWechat();
			},
			footerBtnClick(type) {
				this.$refs.tantan.addCard(type);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.tan-box {
		position: relative;
	}
	.btn-box {
		position: absolute;
		bottom: 70rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn {
		height: 96rpx;
		width: 180rpx;
		margin: 0 16rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		transition: 100ms;
	}
	.btn2 {
		height: 96rpx;
		width: 96rpx;
		margin: 0 16rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		transition: 100ms;
	}
	.btn-left {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #e6028e;
		margin-left: 20px;
		padding: 8rpx 20rpx;
		border-radius: 20px;
	}
</style>
